<template>
  <div class="list-pages white-bg">
    <div class="list-pages-header">
      <div class="header-title">[这是实验名称]作业统计</div>
      <div class="header-desc">2023级3班</div>
    </div>
    <div class="pages-charts">
      <div class="chart-box">
        <div class="chart-title">作业完成进度统计图</div>
        <div class="chart">
          <chart1 :data="chart1Data" />
        </div>
      </div>
      <div class="chart-box">
        <div class="chart-title">作业评分分布图</div>
        <div class="chart">
          <chart2 :data="chart2Data" />
        </div>
      </div>
    </div>
    <div class="table-header">学生完成情况</div>
    <div class="table-wrapper">
      <a-table
        class="table-box"
        row-key="index"
        :columns="columns"
        :dataSource="tableData"
        :row-class-name="
          (_record, index) => (index % 2 === 1 ? 'table-striped' : null)
        "
        sticky
        :scroll="{ y: true, x: 'max' }"
        :pagination="false"
        @change="onChange"
      >
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.dataIndex == 'no'">
            {{ index + 1 }}
          </template>
          <template v-if="column.dataIndex == 'status'">
            <div
              class="cell-status-box"
              :class="{ 'is-active': record.status != 0 }"
            >
              <div class="status-dot"></div>
              <div class="status-text" v-if="record.status == 0">已完成</div>
              <div class="status-text" v-if="record.status == 1">未完成</div>
              <div class="status-text" v-if="record.status == 2">未提交</div>
            </div>
          </template>
          <template v-if="column.dataIndex == 'operation'">
            <a-button type="link" v-if="record.status == 0" @click="handleLook(record)">
              查看实验
            </a-button>
            <a-button
              type="link"
              v-if="record.status == 0"
              @click="handleDetail(record)"
            >
              查看报告
            </a-button>
            <a-button
              type="link"
              v-if="record.status == 0 && !record.report_score"
              @click="handleRate(record)"
            >
              评分
            </a-button>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import API from "@/api/user";
import { useRouter } from "vue-router";
import { useGlobalStore } from "@/store/modules/global";
import chart1 from "./chart1.vue";
import chart2 from "./chart2.vue";
const router = useRouter();
const store = useGlobalStore();
const query = computed(() => router.currentRoute.value.query);
const tableData = ref([]);
const handleLook = (row) => {
  const experiment = datas.value?.experiment;
  if (experiment) {
    console.log(111, experiment);
    let origin = window.location.origin;
    let code = "";
    let types = null;
    if (experiment.experiment_type_id == 2) {
      code = "Optics_T01_001";
      types = 1;
    } else if (experiment.experiment_type_id == 3) {
      code = "Optics_T02_001";
      types = 2;
    } else if (experiment.experiment_type_id == 1) {
      code = "Optics_T03_001";
      types = 3;
    }
    let url = "";
    if (types == 1) {
      url = `${origin}/#/share1?id=${experiment.experiment_id}&type=${types}&code=${code}&expuid=${row.id}&role=4`;
    } else if (types == 3) {
      url = `${origin}/#/share3?id=${experiment.experiment_id}&type=${types}&code=${code}&expuid=${row.id}&role=4`;
    }
    window.open(url);
  }
  //http://localhost:5178/#/share1?id=e1&type=1&code=Optics_T01_001&expuid=c475c38266404fb2972c4286f9219de1&role=4
};
const handleDetail = (row) => {
  store.clearSubTitle();
  store.setSubTitle("作业详情");
  router.push({
    path: "/lab-detail",
    query: {
      id: row.id,
      name: row.name,
      isEdit: false,
    },
  });
};
const handleRate = (row) => {
  store.clearSubTitle();
  store.setSubTitle("作业评分");
  router.push({
    path: "/lab-detail",
    query: {
      id: row.id,
      name: row.name,
      isEdit: true,
    },
  });
};
const columns = ref([
  {
    dataIndex: "no",
    title: "序号",
    width: "80",
  },
  {
    dataIndex: "student_name",
    title: "学生姓名",
  },
  {
    dataIndex: "student_no",
    title: "学号",
  },
  {
    dataIndex: "status",
    title: "完成情况",
  },
  {
    dataIndex: "date",
    title: "提交时间",
  },
  {
    dataIndex: "score",
    title: "评分",
  },
  {
    dataIndex: "operation",
    title: "操作",
    width: 300,
    fixed: "right",
  },
]);
const chart1Data = ref([]);
const chart2Data = ref({});
const datas = ref();
const getData = async () => {
  let params = {
    homework_id: query.value.id,
  };
  const res = await API.HomeworkFetchModel(params);
  datas.value = res;
  let list = res.reports.map((item) => {
    return {
      id: item.report_id,
      name: res?.name,
      student_name: item?.student_name_from_user,
      student_no: item?.student_no,
      status: item.is_draft==false ? 0 : 1,
      date: item?.updated,
      score: item?.report_score?.finnal_score ?? "未评分",
    };
  });
  let unlist = res.unfinish_students.map((item) => {
    return {
      student_name: item?.student_real_name,
      student_no: null,
      status: 2,
      date: "",
      score: "未评分",
    };
  });
  chart1Data.value = [
    { value: res?.repors_has_score_count ?? 0, name: "已评分" },
    { value: res?.repors_has_not_score_count ?? 0, name: "待评分" },
    { value: res?.unfinish_students_count ?? 0, name: "未完成" },
  ];
  let scoreList = res?.repors_has_score.map((item) => {
    return {
      score: item?.report_score?.finnal_score,
    };
  });
  //把scoreList中的score字段放到dataY中,分数按照100-90,80-70,70-60,60-50,50以下分段统计数量
  let arr = [0, 0, 0, 0, 0, 0];
  scoreList.forEach((item) => {
    if (item.score >= 90) {
      arr[0] += 1;
    } else if (item.score >= 80) {
      arr[1] += 1;
    } else if (item.score >= 70) {
      arr[2] += 1;
    } else if (item.score >= 60) {
      arr[3] += 1;
    } else if (item.score >= 50) {
      arr[4] += 1;
    } else {
      arr[5] += 1;
    }
  });
  chart2Data.value = {
    dataX: ["A", "B", "C", "D", "E", "F"],
    dataY: arr,
  };
  console.log(chart2Data.value);
  tableData.value = [...list, ...unlist];
};
onMounted(async () => {
  await getData();
});
</script>
<style lang="less" scoped>
.list-pages {
  height: 100%;
  padding: 0 16px;
  display: flex;
  flex-direction: column;

  .table-wrapper {
    width: 100%;
    flex: 1;
    .table-box {
      height: 100%;
    }
  }

  .list-pages-header {
    height: 88px;
    background: #ffffff;
    border-bottom: 1px solid #e6ebf1;
    padding: 20px 0;
    margin-bottom: 24px;
    .header-title {
      height: 24px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 18px;
      color: #262626;
      line-height: 24px;
      text-align: center;
      font-style: normal;
      margin-bottom: 8px;
    }
    .header-desc {
      height: 16px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #262626;
      line-height: 16px;
      text-align: center;
      font-style: normal;
    }
  }
  .pages-charts {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    .chart-box {
      flex: 1;
      margin-right: 12px;
      height: 326px;
      background: linear-gradient(163deg, #f8f2ff 0%, #ffffff 100%);
      border: 1px solid #e6ebf1;
      padding: 0 20px;
      &:last-child {
        margin-right: 0;
      }
      .chart-title {
        height: 54px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #262626;
        line-height: 54px;
        text-align: left;
        font-style: normal;
        border-bottom: 1px solid #e6ebf1;
      }
      .chart {
        height: calc(100% - 54px);
      }
    }
  }
  .table-header {
    height: 56px;
    margin-bottom: 16px;
    background: #ffffff;
    border-bottom: 1px solid #e6ebf1;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #262626;
    line-height: 56px;
    text-align: left;
    font-style: normal;
  }
}
</style>
